"use client";
import dayjs from "dayjs";
import ReactECharts from "echarts-for-react";
import React, { useEffect, useState } from "react";
import "./index.css";

interface CalendarChartProps {}

const CalendarChart: React.FC<CalendarChartProps> = () => {
    const [dataList, setDataList] = useState<number[]>([]);
    const year = new Date().getFullYear();

    useEffect(() => {
        // 使用静态数据替代API请求
        const mockData = Array.from(
            { length: 120 },
            () => Math.floor(Math.random() * 365) + 1
        ).filter((v, i, a) => a.indexOf(v) === i); // 去重

        setDataList(mockData);

        // 原始API请求代码（已注释掉）
        /*
        const fetchDataList = async () => {
            try {
                const res = await getUserSignInRecordUsingGet({ year });
                setDataList(res.data || []);
            } catch (e) {
                message.error("获取刷题签到记录失败，" + e.message);
            }
        };
        fetchDataList();
        */
    }, []);

    // 转换数据格式为ECharts需要的格式
    const optionsData = dataList.map((dayOfYear) => {
        const dateStr = dayjs(`${year}-01-01`)
            .add(dayOfYear - 1, "day")
            .format("YYYY-MM-DD");
        return [dateStr, 1]; // [日期, 值]
    });

    // ECharts配置项
    const options = {
        visualMap: {
            show: false,
            min: 0,
            max: 1,
            inRange: {
                color: ["#ebedf0", "#9be9a8", "#40c463", "#30a14e", "#216e39"],
            },
        },
        calendar: {
            range: year,
            left: "right",
            top: 30,
            cellSize: [23, 23], // 固定正方形格子大小
            yearLabel: {
                show: true,
                position: "bottom",
                formatter: `${year}年刷题记录`,
                color: "#666",
                fontSize: 18,
                fontWeight: "bold",
            },
            itemStyle: {
                borderWidth: 0.8,
                borderColor: "#eee",
            },
            weekFirstDay: 0, // 确保日历从周一开始
            dayLabel: {
                nameMap: ["周日", "周一", "", "周三", "", "周五", ""],
                firstDay: 1,
            },
            monthLabel: {
                nameMap: [
                    "一月",
                    "二月",
                    "三月",
                    "四月",
                    "五月",
                    "六月",
                    "七月",
                    "八月",
                    "九月",
                    "十月",
                    "十一月",
                    "十二月",
                ],
            },
        },
        series: [
            {
                type: "heatmap",
                coordinateSystem: "calendar",
                data: optionsData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                },
            },
        ],
        tooltip: {
            formatter: function (params: any) {
                const date = dayjs(params.data[0]);
                return `日期: ${date.format("YYYY-MM-DD")}<br/>刷题数: ${params.data[1]}`;
            },
        },
    };

    return (
        <div className="calendar-chart-container">
            <ReactECharts
                option={options}
                style={{ height: "440px", width: "100%" }}
                className="calendar-chart"
            />
        </div>
    );
};

export default CalendarChart;
